<template>
  <div class="dashboard">
    <div class="welcome">
      <h2>🎯 软件研发派单接单系统</h2>
      <p>欢迎使用软件研发项目管理平台，高效管理您的研发工单</p>
    </div>

    <div class="stats-overview">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon">📋</div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.total }}</div>
                <div class="stat-label">总工单数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon">⏳</div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.pending }}</div>
                <div class="stat-label">待分配</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon">🚀</div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.progress }}</div>
                <div class="stat-label">进行中</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-icon">✅</div>
              <div class="stat-info">
                <div class="stat-number">{{ stats.completed }}</div>
                <div class="stat-label">已完成</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="quick-actions">
      <el-card>
        <template #header>
          <span>⚡ 快捷操作</span>
        </template>
        <div class="actions">
          <el-button type="primary" size="large" @click="$router.push('/ticket/create')">
            ➕ 提交新工单
          </el-button>
          <el-button type="success" size="large" @click="$router.push('/ticket/list')">
            📋 查看工单列表
          </el-button>
          <el-button type="warning" size="large" @click="$router.push('/ticket/assign')">
            👥 工单分配管理
          </el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"

const stats = ref({
  total: 20,
  pending: 3,
  progress: 5,
  completed: 12
})
</script>

<style scoped>
.welcome { text-align: center; margin-bottom: 30px; }
.welcome h2 { color: #303133; margin-bottom: 10px; }
.welcome p { color: #909399; }

.stats-overview { margin-bottom: 30px; }
.stat-card { cursor: pointer; transition: transform 0.2s; }
.stat-card:hover { transform: translateY(-2px); }
.stat-content { display: flex; align-items: center; }
.stat-icon { font-size: 32px; margin-right: 15px; }
.stat-number { font-size: 24px; font-weight: bold; color: #409EFF; }
.stat-label { color: #909399; font-size: 14px; }

.actions { display: flex; gap: 15px; justify-content: center; }
</style>